﻿@using ETD.Common.Extension;
@using ETD.WebOrganization.Libs.Helper;
@using ETD.WinClient.Config;
@using ETD.Domain.EnumModels;
@using ETD.Domain.WebModels;
@using ETD.Common;
@using ETD.WebOrganization.Libs.Controls;
@model ETD.WebOrganization.Areas.Web.Models.FeedbackManageModel
@{
    ViewBag.Title = "报修管理";
}
@{
    var uiFeedbackList = Model.UIFeedbackList;
}
<style>
    .feedbackItemLink {
    }

    .weui-btn_primary {
        background-color: #4dd1c1;
        width: 300px;
    }

    .weui-btn-area {
        position: fixed;
        bottom: 90px;
        width: 100%;
        margin-left: 0px;
    }

    .end_hold {
        height: 100px;
    }

    .weui-navbar {
        position: relative;
    }

    .weui-bar__item--on {
        color: #4dd1c1 !important;
    }

    .weui-cells:after {
        border-bottom: 0px solid #e5e5e5 !important;
    }
</style>

<div id="contentContainer" class="weui-tab__bd-item weui-tab__bd-item--active">

    <div class="weui-tab">
        <div class="weui-navbar">
            <a id="tabNotProcess" class="weui-navbar__item" href="#" v-on:click="onSwitchFacilityStatus(@((int)EFeedbackStatus.NotProcess))">
                未处理<span>({{notProcessCount}})</span>
            </a>
            <a id="tabProcessed" class="weui-navbar__item" href="#" v-on:click="onSwitchFacilityStatus(@((int)EFeedbackStatus.Processed))">
                已处理<span>({{processedCount}})</span>
            </a>
        </div>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">医院</label></div>
            <div class="weui-cell__bd">
                <input id="txtOrganizationID" type="hidden" value="">
                <input class="weui-input" id="ddlOrganizationList" name="ddlOrganizationList" type="text" value="" placeholder="请选择医院">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">科室</label></div>
            <div class="weui-cell__bd">
                <input id="txtSectionOfficeID" type="hidden" value="">
                <input class="weui-input" id="ddlSectionOfficeList" name="ddlSectionOfficeList" type="text" value="" placeholder="请选择科室">
            </div>
        </div>
    </div>
    <div class="weui-cells">
        <template>
            @*(item, index)  index是集合索引*@
            <div v-for="(item, index) in itemList">
                <div class="weui-cell weui-cell_access income_current" data="5053|65941">
                    <div class="weui-cell__bd feedbackItemLink" v-on:click="onItemLinkClick(item)">
                        <span style="vertical-align: middle">设备号：{{item.FacilityCode}}</span>
                    </div>
                    <div class="weui-cell__ft">
                        <span style="font-size:12px;"></span>
                    </div>
                </div>
                <div class="weui-flex weui-cells__tips">
                    <div class="weui-flex__item" style="padding-right:5px;"><div class="placeholder">问题描述：<span>{{item.Description}}</span></div></div>
                </div>
                <div class="weui-flex weui-cells__tips">
                    <div class="weui-flex__item" style="padding-right:5px;"><div class="placeholder">医院：<span>{{item.OrganizationName}}</span></div></div>
                </div>
                <div class="weui-flex weui-cells__tips">
                    <div class="weui-flex__item" style="padding-right:5px;"><div class="placeholder">科室：<span>{{item.SectionOfficeName}}</span></div></div>
                    <div class="weui-flex__item"><div class="placeholder">床号：<span>{{item.BedNumber}}</span> </div></div>

                </div>
                <div class="weui-flex weui-cells__tips">

                    <div class="weui-flex__item" style="padding-right:5px;"><div class="placeholder">类型：<span>{{item.FacilityIssueTypeName}}</span></div></div>
                    <div class="weui-flex__item"><div class="placeholder">状态：<span>{{item.FeedbackStatusName}}</span> </div></div>

                </div>

                <div class="weui-flex weui-cells__tips">
                    <div class="weui-flex__item" style="padding-right:5px;"><div class="placeholder">时间：<span>{{item.CreateAtText}}</span> </div></div>
                </div>
            </div>
            <div class="weui-loadmore" v-show="loading" style="margin-bottom:100px;">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">{{loadingText}}</span>
            </div>
            @*没有更多数据后，占位符，因为这里有一个添加按钮，占走了很多高度*@
            <div class="no-more-data-placehoder" v-show="!loading" style="margin-bottom:100px;">
            </div>
        </template>
    </div>

    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="btnAddProblemReport">新增报修</a>
    </div>

</div>

@section ScriptSection{
    <script>
        var pageVue = new Vue({
            el: '#contentContainer',
            data: {
                itemList: [],
                totalCount: 0,
                notProcessCount: 0,
                processedCount: 0,
                feedbackStatusID: null,
                page: 0,
                hasMore: true,
                loading: false,
                loadingText: '向上滑动加载更多...'
            },
            created () {
                let self = this;
                self.feedbackStatusID = '@((int)EFeedbackStatus.NotProcess)';
                this.getItemList();
                this.scrollBottom();
               
            }
      ,
            mounted () {
                // 添加滚动事件，检测滚动到页面底部
                //window.addEventListener('scroll', this.scrollBottom)
            },
            methods: {
                scrollBottom: function () {
                    let self = this;
                    var baseVue = new BaseVue();
                    baseVue.scrollBottom(self);
                },
                onItemLinkClick: function (item) {
                    PageObj.onFeedbackItemLinkClick(item.FeedbackID);
                },
                decimalF2: function (num) {
                    return StringHelper.decimalF2(num);
                },
                toYmdhmsTime: function (time) {
                    return TimeHelper.ymdhmsTime(time);
                },
                refreshItemList: function () {
                    let self = this;
                    self.hasMore = false;
                    self.loading = true;
                    self.loadingText = '努力加载中...';
                    self.page = 0;
                    self.itemList = [];
                    self.getItemList();
                },
                getItemList: function () {
                    let self = this;
                    var feedbackStatusID = self.feedbackStatusID;
                    var hospitalOrganizationID = $("#txtOrganizationID").val();
                    var sectionOfficeID = $("#txtSectionOfficeID").val();
                    var url = '@Url.Action("FindFeedbackList", "Feedback")';
                    url = WinHelper.urlWrap(url);
                    var paras = {};
                    paras.FeedbackStatusID = feedbackStatusID;
                    paras.HospitalOrganizationID = hospitalOrganizationID;
                    paras.SectionOfficeID = sectionOfficeID;
                    paras.CurrentPageIndex = self.page;
                    showCommonLoading();
                    // 获取今日新闻
                    axios.post(url, paras)
                      .then((res) => {
                          hideCommonLoading();
                          console.log(res.data);
                          this.bindItemList(res.data);
                      });
                },
                bindItemList: function (data) {
                    let self = this;
                    self.totalCount = data.TotalCount;
                    self.notProcessCount = data.Data.NotProcessCount;
                    self.processedCount = data.Data.ProcessedCount;
                    if (data.Data.FeedbackList != null) {
                        $.each(data.Data.FeedbackList, function (i, item) {
                            self.itemList.push(item);
                        });
                    }

                    self.loadingText = '向上滑动加载更多...'
                    if (self.itemList.length >= data.TotalCount) {
                        self.loadingText = "没有更多数据了...";
                        self.hasMore = false;
                        self.loading = false;
                    } else {
                        self.hasMore = true;
                    }
                },
                onSwitchFacilityStatus: function (facilityStatusID) {
                    let self = this;
                    self.feedbackStatusID = facilityStatusID;
                    self.refreshItemList();
                }
            }
        })
    </script>
    <script>
        $(function () {
            PageObj.init();
        });
        var PageObj = {};
        PageObj.init = function () {
            //$(".feedbackItemLink").click(PageObj.onFeedbackItemLinkClick);
            $("#btnAddProblemReport").click(PageObj.onBtnAddProblemReport);
            PageObj.findDdlOrganizationList();
            PageObj.findDdlSectionOfficeList();

            //控制tab feedbackStatusID
            var feedbackStatusID = WinHelper.getUrlParam("feedbackStatusID");
            if (!feedbackStatusID || feedbackStatusID == "@((int)EFeedbackStatus.NotProcess)") {
                $("#tabNotProcess").addClass("weui-bar__item--on");
            } else {
                $("#tabProcessed").addClass("weui-bar__item--on");
            }
        };
        PageObj.onFeedbackItemLinkClick = function (feedbackID) {
            console.log("feedbackid=" + feedbackID);
            window.location.href = "@Url.ActionTS("FeedbackDetail", "Feedback")&feedbackID=" + feedbackID;
        }
        PageObj.onBtnAddProblemReport = function () {
            window.location.href = "@Url.ActionTS("FeedbackEdit", "Feedback")&feedbackID=";
        }

        PageObj.findDdlOrganizationList = function () {
            var paras = {};
            ajaxPost("@Url.Action("FindOrganizationDropdownList", "Facility")", paras, function (data) {
                console.log(data);
                if (data.Status) {
                    PageObj.bindDdlOrganizationList(data.Data, null);
                } else {
                    $.toast(data.Info, "forbidden");
                }
            });
        }
        PageObj.bindDdlOrganizationList = function (data, selectedID) {
            var ddlItems = [];
            ddlItems.push({ "title": "--请选择医院--", "value": "" });
            var selectedItem = null;
            if (data) {

                $.each(data, function (index, value) {
                    //{title: "iPhone 8",value: "001",}
                    if (selectedID == value.ID) {
                        selectedItem = value;
                    }
                    ddlItems.push({ "title": value.Name, "value": value.ID });
                });
            }
            if (selectedItem) {
                $("#txtOrganizationID").val(selectedItem.ID);
                $("#ddlOrganizationList").val(selectedItem.Name);
            } else {
                $("#txtOrganizationID").val("");
                $("#ddlOrganizationList").val("");
            }

            $("#ddlOrganizationList").select("update", {
                title: "医院",
                items: ddlItems,
                onChange: function (d) {
                    var changedID = d.values;
                    console.log("ddlOrganizationList changedID=" + changedID + " txtOrganizationID=" + $("#txtOrganizationID").val());

                    var changed = changedID != $("#txtOrganizationID").val();
                    if (changed) {
                        PageObj.findDdlSectionOfficeList(changedID);
                    }
                    $("#txtOrganizationID").val(changedID);
                    if (changed) pageVue.refreshItemList();
                },
                onClose: function () {
                    console.log("close");
                },
                onOpen: function () {
                    console.log("open");
                },
            });
        }
        PageObj.findDdlSectionOfficeList = function (organizationID) {
            var paras = {};
            paras.OrganizationID = organizationID;
            if (organizationID > 0) {
                ajaxPost("@Url.Action("FindSectionOfficeDropdownList", "Facility")", paras, function (data) {
                    console.log(data);
                    if (data.Status) {
                        PageObj.bindDdlSectionOfficeList(data.Data, null);
                    } else {
                        $.toast(data.Info, "forbidden");
                    }
                });
            } else {
                PageObj.bindDdlSectionOfficeList(null, null);
            }
        }
        PageObj.bindDdlSectionOfficeList = function (data, selectedID) {
            console.log("bindDdlSectionOfficeList start");
            var ddlItems = [];
            ddlItems.push({ "title": "--请选择科室--", "value": "" });
            var selectedItem = null;
            if (data) {
                $.each(data, function (index, value) {
                    //{title: "iPhone 8",value: "001",}
                    if (selectedID == value.ID) {
                        selectedItem = value;
                    }
                    ddlItems.push({ "title": value.Name, "value": value.ID });
                });
            }
            if (selectedItem) {
                $("#txtSectionOfficeID").val(selectedItem.ID);
                $("#ddlSectionOfficeList").val(selectedItem.Name);
            }
            else {
                $("#txtSectionOfficeID").val("");
                $("#ddlSectionOfficeList").val("");
            }
            console.log("bindDdlSectionOfficeList ddlItems=");
            console.log(ddlItems);

            $("#ddlSectionOfficeList").select("update", {
                title: "科室",
                items: ddlItems,
                onChange: function (d) {
                    var changedID = d.values;
                    console.log("ddlSectionOfficeList changedID=" + changedID + " txtSectionOfficeID=" + $("#txtSectionOfficeID").val());
                    var changed = changedID != $("#txtSectionOfficeID").val();
                    //if (changed) {
                    //    PageObj.findDdlSectionOfficeList(changedID);
                    //}
                    $("#txtSectionOfficeID").val(changedID);
                    if (changed) pageVue.refreshItemList();
                },
                onClose: function () {
                    console.log("close");
                },
                onOpen: function () {
                    console.log("open");
                },
            });

        }
    </script>
}